<template>
    <div class="pagination">
        <el-pagination :current-page="pageData.currentPage" :page-size="pageData.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]" :small="small" :disabled="disabled" :background="background" :layout="layout"
            :total="props.total" @size-change="sizeChange" @current-change="currentChange" />
    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue'
const props = defineProps({
    total: {
        type: Number, //当前总条数
        default: 50
    },
    layout: {
        type: String, //当前总条数
        default: "total, sizes, prev, pager, next, jumper"
    },
    small: {
        type: Boolean,
        default: true
    },
    background: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    },
    pageData: {
        type: Object,
        default: {
            currentPage: 1,
            pageSize: 20
        }
    }
})
const pageData = reactive(props.pageData)
const emit = defineEmits(['current-change'])
// 当前页数
const currentChange = (current: any) => {
    pageData.currentPage = current
    emit("current-change", pageData)
}
// 设置每页多少条数据
const sizeChange = (pageSize: number) => {
    pageData.pageSize = pageSize
    emit("current-change", pageData)
}

</script>
<style lang='scss' scoped>
.pagination {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

}

// Your scoped styles here
</style>